<!--
 * @Description: 历史数据
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:20:05
-->
<template>
  <div>

    <!-- 树形控件 -->
    <el-col :span="6">
      <div class="empData" style="
                  padding-right: 10px;
                  border-right: 1px solid #ccc;
                  height: calc(100vh - 60px);
                ">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText">
        </el-input>
        <el-tree @node-click="handlerClick" class="filter-tree" :data="data" :props="defaultProps"
          :filter-node-method="filterNode" ref="tree">
        </el-tree>
      </div>
    </el-col>

    <!-- 右边内容 -->
    <el-col :span="18"> 
      <div v-if="params.device_id" class="table" style="margin-left: 10px">
        <!-- 月选择器 + 搜索按钮 -->
        <div class="header">
          <!-- {{ params.date }}  -->
          <el-date-picker v-model="params.date" type="month" placeholder="选择月">
          </el-date-picker>

          <el-button type="primary" @click="toSearch">搜索</el-button>
        </div>

        <!-- 表格数据 -->
        <div class="content">
          <el-table :data="empData" style="width: 100%">
            <el-table-column prop="d" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="tsp" label="tsp" width="180">
            </el-table-column>
            <el-table-column prop="pm10" label="pm10"> </el-table-column>
            <el-table-column prop="pm25" label="pm25"> </el-table-column>
            <el-table-column prop="temperature" label="温度">
            </el-table-column>
            <el-table-column prop="humidity" label="湿度"> </el-table-column>
            <el-table-column prop="wind_direction" label="风向">
            </el-table-column>
            <el-table-column prop="wind_speed" label="风速">
            </el-table-column>
          </el-table>
        </div>

      </div>
      <!-- 当用户没有点击设备时 -->
      <div v-else style="color: red; text-align: center">
        <el-empty :image-size="300" description="请选择设备查看"></el-empty>
      </div>

    </el-col>

  </div>
</template>

<script>
import { get } from '@/utils/request'
export default {
    data() {
        return {
            // 设备采集的数据
            empData: [],
            // 过滤文本
            filterText: '',
            // 树形结构数据源
            data: [],
            // 树形结构配置项
            defaultProps: {
                children: 'children',
                label: 'name',
            },
            params: {
                engineer_id: '',
                device_id: '',
            },
        }
    },
    watch: {
        // 监听文本进行过滤
        filterText(val) {
            this.$refs.tree.filter(val)
        },
    },
    computed: {},
    methods: {
        getTimer() {
          // 把this.params.date转化成2023-3这个格式
            if (this.params.date) {
                let y = this.params.date.getFullYear()
                let m = this.params.date.getMonth() + 1
                m = m < 10 ? '0' + m : m

                this.params.date = y + '-' + m
                // console.log(this.params)
            }
        },
        toSearch() {
            this.getEmpData()
        },
        // 点击树形节点
        handlerClick(data) {
            // data 点击工程 data---工程数据 children
            // data 点击设备 data---设备数据 没有children
            // 判断点击的是设备
            //console.log(data);
            if (!data.children) {
                this.params.engineer_id = data.engineer_id
                this.params.device_id = data.id
                this.getEmpData()
            }
            if (data.children) {
                this.params.engineer_id = null
                this.params.device_id = null
            }
        },

        // 获取工程设备采集的数据--右侧数据
        async getEmpData() {
            // params page pageSize device_id e_id
            // 判断时间日期是否被选择
            this.getTimer()
            let res = await get('/monitor/queryMouthData', this.params)
            // console.log(res.data)
            this.empData = res.data
        },
        // 获取工程设备 --左侧用到数据
        async loadEmpData() {
            let res = await get('/engineer/findEngineerDeviceTree')
            this.data = res.data
        },
        // 过滤节点的方法
        filterNode(value, data) {
            if (!value) return true
            // return data.label.indexOf(value) !== -1;
            return data.name.indexOf(value) !== -1
        },
    },
    created() {
        this.loadEmpData()
        this.getEmpData()
    },
    mounted() {},
}
</script>
<style>
.header {
    width: 1288px;
    height: 42px;
    background-color: #f4f4f4;
    line-height: 42px;
    padding-left: 8px;
    padding-right: 14px;
    border-left: 5px solid rgb(248, 128, 128);
}
</style>